@charset "UTF-8";
/**
 * 
 * @authors Richie
 * @date    2017-09-2 10:39:39
 * @version 1.0.0
 */

/* page1 */
.textBox{ width: 100%; background: url(../images/float.png) no-repeat; background-size: contain; text-align: center;
	.title{ padding-top: 12%; color: #ff302b; font-size: 1.5rem; font-family: 'jxuefeng';}
	.text{ padding: 0.5rem 0; font-size: 0.53rem; font-weight: bold; line-height: 1.5;
		em{ color: #fd5f11; font-style: normal;}
	}
	&:after{ content: ''; display: block; margin: 0 auto; width: 0.8rem; height: 0.8rem; background: url(../images/arrow.png); background-size: cover; ;line-height: 1;}
}
.cover{ position:relative; box-sizing:border-box; padding:1rem;
	.cover-img{ width:100%; height:auto; border-radius:1.375rem }
	.fraction{ position:absolute; top:-1rem; right:0; padding:1.5rem; font-size: 1.5rem; background: url(../images/fraction.png) transparent no-repeat scroll 50%; background-size: contain; color:#e94b59;text-align:center; font-size:1.75rem }
	.redpacket{ position:absolute; top: 4rem; right: 2.4%; width: 2.6rem; height: auto;}
}

.shareBox{
	.addPhoto{ position: relative; margin: 0 auto; width: 60%; text-align: center; border: 1px solid #ccc; overflow: hidden;
		img{ display: inline-block; margin-top: 4rem; width: 1.06rem; -webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);}
		span{ padding: 2rem 0;}
		input{ position: absolute; left: 0; top: 0; font-size: 20rem; opacity: 0;}
	}
	.sharePhoto{
		.photo{ margin: 0 auto; width: 60%;
			img{ display: inline-block;  width: 100%; border: 1px solid #ccc;}
		}
		.fillText{ padding: 1rem 2rem; margin: 0 auto;
			.wordsTit{ padding-bottom: .5rem; font-weight: bold;}
			.words{ width: 100%; resize:none; min-height: 4rem;}
			.btn{ padding-top: .5rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;
				.reSel{ display: block; padding: .5rem 1rem; background-color: #ccc;color: #fff; border-radius: .2rem;}
				.share{ display: block; padding: .5rem 1rem; background-color: #0099CC;color: #fff; border-radius: .2rem;}
			}
		}
		.shareSucc{ padding: 1rem 2rem; margin: 0 auto;
			.btn{ padding-top: .5rem; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center;
				.view{ display: block; padding: .5rem 1rem; background-color: #0099CC;color: #fff; border-radius: .2rem;}
			}
		}
	}
}

.myshareBox{ padding: 1rem;
	.photo{ margin: 1rem auto; width: 60%;
		img{ display: inline-block;  width: 100%; border: 1px solid #ccc;}
	}
	.happyNews{ background-color: #F2F2F2;}
	.appreciate{ margin: 0 auto; display: inline-block; padding: .5rem 1rem; background-color: #0099CC; color: #fff; font-size: 0.77rem; border-radius: .2rem;
		&:before{ content: ''; width: 1rem; height: 1rem; display: inline-block; background: url(../images/zan.png) no-repeat; background-size: cover; vertical-align: bottom; margin-right: .5rem;}
	}
	.appreBox{ display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; flex-wrap: wrap; -webkit-flex-wrap: wrap; background-color: #F2F2F2; padding: 0 0 .5rem .5rem;
		.apprePhoto{ margin: .5rem .5rem 0 0 ; width: 1rem;
			img{ width: 100%;}
		}
	}
}

.boradBox{ padding: 0.5rem; background: url(../images/textbg.png) no-repeat; background-size: cover; line-height: 1.2;
		.rule{ color: #0099CC; font-style: normal;}
	}

.openEnvelopeBox{ 
	.openEnvelope{ text-align: center;
		.envelope{ padding: 0.8rem; width: 6rem; height: 6rem;}
	}
	.wrapper{ margin: 2.8%;
		.title{ display: block; font-size: 0.667rem; color:#666;}
		.content{ margin: 0; display: inline-block; text-align: left; color:#666; line-height: 1.5;}
		.tip{ display: block; color:#666;}
	}
}
